Next.js रूट हँडलर्स: API एंडपॉइंट तयार करण्यासाठी एक व्यापक मार्गदर्शक

Next.js ने सर्व्हर-साइड रेंडरिंग, स्टॅटिक साइट जनरेशन आणि आता, रूट हँडलर्स यांसारख्या शक्तिशाली वैशिष्ट्यांसह वेब ॲप्लिकेशन्स बनवण्याच्या पद्धतीत क्रांती आणली आहे. रूट हँडलर्स आपल्या Next.js ॲप्लिकेशनमध्ये थेट API एंडपॉइंट्स तयार करण्याचा एक लवचिक आणि कार्यक्षम मार्ग प्रदान करतात. हे मार्गदर्शक रूट हँडलर्सची संकल्पना, त्यांचे फायदे आणि मजबूत API तयार करण्यासाठी त्यांचा प्रभावीपणे वापर कसा करायचा हे स्पष्ट करते.

Next.js रूट हँडलर्स काय आहेत?

रूट हँडलर्स हे Next.js प्रोजेक्टच्या app डिरेक्टरीमध्ये परिभाषित केलेले फंक्शन्स आहेत जे येणाऱ्या HTTP विनंत्या हाताळतात. जुन्या pages/api पद्धतीपेक्षा (जी API रूट्स वापरते), रूट हँडलर्स तुमच्या React कंपोनंट्ससोबत API एंडपॉइंट्स परिभाषित करण्याचा अधिक सुव्यवस्थित आणि लवचिक मार्ग देतात. हे मूलतः सर्व्हरलेस फंक्शन्स आहेत जे एजवर किंवा तुमच्या निवडलेल्या सर्व्हर वातावरणात कार्यान्वित होतात.

रूट हँडलर्सना तुमच्या Next.js ॲप्लिकेशनचे बॅकएंड लॉजिक समजा, जे विनंत्यांवर प्रक्रिया करणे, डेटाबेसशी संवाद साधणे आणि प्रतिसाद परत करण्यासाठी जबाबदार असतात.

रूट हँडलर्स वापरण्याचे फायदे

• कोलोकेशन (Colocation): रूट हँडलर्स थेट तुमच्या React कंपोनंट्सच्या बाजूला app डिरेक्टरीमध्ये राहतात, ज्यामुळे चांगली रचना आणि कोडची देखभाल सुलभ होते.
• TypeScript सपोर्ट: अंगभूत TypeScript सपोर्टमुळे टाइप सेफ्टी आणि चांगला डेव्हलपर अनुभव सुनिश्चित होतो.
• मिडलवेअर इंटिग्रेशन: ऑथेंटिकेशन, ऑथोरायझेशन आणि रिक्वेस्ट व्हॅलिडेशन यांसारख्या कार्यांसाठी मिडलवेअर सहजपणे समाकलित करता येते.
• स्ट्रीमिंग सपोर्ट: रूट हँडलर्स डेटा स्ट्रीम करू शकतात, ज्यामुळे तुम्हाला प्रतिसाद टप्प्याटप्प्याने पाठवता येतो, जे मोठ्या डेटासेट किंवा दीर्घकाळ चालणाऱ्या प्रक्रियांसाठी फायदेशीर आहे.
• एज फंक्शन्स (Edge Functions): वापरकर्त्यांच्या जवळ कमी लेटेंसी प्रतिसादासाठी, ग्लोबल CDN चा फायदा घेत रूट हँडलर्सना एज फंक्शन्स म्हणून तैनात करा.
• सरळ API डिझाइन: रूट हँडलर्स विनंत्या आणि प्रतिसाद हाताळण्यासाठी एक स्वच्छ आणि सोपा API प्रदान करतात.
• सर्व्हर ॲक्शन्स इंटिग्रेशन: सर्व्हर ॲक्शन्ससोबत घट्ट एकीकरण तुमच्या क्लायंट-साइड कंपोनंट्स आणि सर्व्हर-साइड लॉजिकमध्ये अखंड संवाद साधण्यास अनुमती देते.

तुमचा Next.js प्रोजेक्ट सेट करणे

रूट हँडलर्समध्ये जाण्यापूर्वी, तुमच्याकडे app डिरेक्टरीसह Next.js प्रोजेक्ट सेट असल्याचे सुनिश्चित करा. तुम्ही नवीन प्रोजेक्ट सुरू करत असल्यास, खालील कमांड वापरा:

            npx create-next-app@latest my-nextjs-app
            

              
                Copy
              
            
          

नवीन राउटिंग सिस्टम सक्षम करण्यासाठी सेटअप प्रक्रियेदरम्यान app डिरेक्टरी निवडा.

तुमचा पहिला रूट हँडलर तयार करणे

चला एक साधा API एंडपॉइंट तयार करूया जो JSON प्रतिसाद देतो. app डिरेक्टरीमध्ये एक नवीन डिरेक्टरी तयार करा, उदाहरणार्थ, /app/api/hello. या डिरेक्टरीमध्ये, route.ts (किंवा तुम्ही TypeScript वापरत नसल्यास route.js) नावाची फाइल तयार करा.

तुमच्या पहिल्या रूट हँडलरसाठी कोड येथे आहे:

            // app/api/hello/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.json({ message: 'Hello from Next.js Route Handlers!' });
}

            

              
                Copy
              
            
          

स्पष्टीकरण:

• import { NextResponse } from 'next/server';: NextResponse ऑब्जेक्ट इम्पोर्ट करते, जो API प्रतिसाद तयार करण्यासाठी वापरला जातो.
• export async function GET(request: Request) { ... }: एक असिंक्रोनस फंक्शन परिभाषित करते जे /api/hello एंडपॉइंटवर GET विनंत्या हाताळते. request पॅरामीटर येणाऱ्या रिक्वेस्ट ऑब्जेक्टमध्ये प्रवेश प्रदान करते.
• return NextResponse.json({ message: 'Hello from Next.js Route Handlers!' });: एका मेसेजसह JSON प्रतिसाद तयार करते आणि NextResponse.json() वापरून परत करते.

आता, तुम्ही तुमच्या ब्राउझरमध्ये /api/hello वर जाऊन किंवा curl किंवा Postman सारखे टूल वापरून या एंडपॉइंटवर प्रवेश करू शकता.

वेगवेगळ्या HTTP मेथड्स हाताळणे

रूट हँडलर्स GET, POST, PUT, DELETE, PATCH, आणि OPTIONS यांसारख्या विविध HTTP मेथड्सना सपोर्ट करतात. तुम्ही एकाच route.ts फाइलमध्ये प्रत्येक मेथडसाठी स्वतंत्र फंक्शन्स परिभाषित करू शकता.

            // app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 // Logic to retrieve all users from the database
 const users = [{ id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Smith' }]; // Example data
 return NextResponse.json(users);
}

export async function POST(request: Request) {
 const data = await request.json(); // Parse the request body as JSON
 // Logic to create a new user in the database using 'data'
 const newUser = { id: 3, name: data.name, email: data.email }; // Example
 return NextResponse.json(newUser, { status: 201 }); // Return the new user with a 201 Created status code
}

            

              
                Copy
              
            
          

स्पष्टीकरण:

• GET फंक्शन वापरकर्त्यांची यादी (येथे सिम्युलेटेड) मिळवते आणि त्यांना JSON प्रतिसाद म्हणून परत करते.
• POST फंक्शन रिक्वेस्ट बॉडीला JSON म्हणून पार्स करते, एक नवीन वापरकर्ता (सिम्युलेटेड) तयार करते आणि नवीन वापरकर्त्याला 201 Created स्टेटस कोडसह परत करते.

रिक्वेस्ट डेटा ॲक्सेस करणे

request ऑब्जेक्ट येणाऱ्या विनंतीबद्दल विविध माहितीमध्ये प्रवेश प्रदान करते, ज्यात हेडर्स, क्वेरी पॅरामीटर्स आणि रिक्वेस्ट बॉडी यांचा समावेश आहे.

हेडर्स (Headers)

तुम्ही request.headers प्रॉपर्टी वापरून रिक्वेस्ट हेडर्स ॲक्सेस करू शकता:

            export async function GET(request: Request) {
 const userAgent = request.headers.get('user-agent');
 console.log('User Agent:', userAgent);
 return NextResponse.json({ userAgent });
}

            

              
                Copy
              
            
          

क्वेरी पॅरामीटर्स (Query Parameters)

क्वेरी पॅरामीटर्स ॲक्सेस करण्यासाठी, तुम्ही URL कन्स्ट्रक्टर वापरू शकता:

            export async function GET(request: Request) {
 const url = new URL(request.url);
 const searchParams = new URLSearchParams(url.search);
 const id = searchParams.get('id');
 console.log('ID:', id);
 return NextResponse.json({ id });
}

            

              
                Copy
              
            
          

रिक्वेस्ट बॉडी (Request Body)

POST, PUT, आणि PATCH विनंत्यांसाठी, तुम्ही कंटेंट प्रकारानुसार request.json() किंवा request.text() मेथड्स वापरून रिक्वेस्ट बॉडी ॲक्सेस करू शकता.

            export async function POST(request: Request) {
 const data = await request.json();
 console.log('Data:', data);
 return NextResponse.json({ receivedData: data });
}

            

              
                Copy
              
            
          

प्रतिसाद परत करणे

NextResponse ऑब्जेक्ट API प्रतिसाद तयार करण्यासाठी वापरला जातो. हे हेडर्स, स्टेटस कोड आणि रिस्पॉन्स बॉडी सेट करण्यासाठी अनेक मेथड्स प्रदान करते.

JSON प्रतिसाद

JSON प्रतिसाद परत करण्यासाठी NextResponse.json() मेथड वापरा:

            return NextResponse.json({ message: 'Success!', data: { name: 'John Doe' } }, { status: 200 });

            

              
                Copy
              
            
          

टेक्स्ट प्रतिसाद

साधा टेक्स्ट प्रतिसाद परत करण्यासाठी new Response() कन्स्ट्रक्टर वापरा:

            return new Response('Hello, world!', { status: 200, headers: { 'Content-Type': 'text/plain' } });

            

              
                Copy
              
            
          

रिडायरेक्ट्स (Redirects)

वापरकर्त्यांना वेगळ्या URL वर रिडायरेक्ट करण्यासाठी NextResponse.redirect() वापरा:

            import { redirect } from 'next/navigation';
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.redirect(new URL('/new-location', request.url));
}

            

              
                Copy
              
            
          

हेडर्स सेट करणे

तुम्ही NextResponse.json() किंवा new Response() मध्ये headers पर्यायाचा वापर करून कस्टम हेडर्स सेट करू शकता:

            return NextResponse.json({ message: 'Success!' }, { status: 200, headers: { 'Cache-Control': 'no-cache' } });

            

              
                Copy
              
            
          

मिडलवेअर इंटिग्रेशन

मिडलवेअर तुम्हाला तुमच्या रूट हँडलरद्वारे विनंती हाताळण्यापूर्वी कोड चालवण्याची परवानगी देतो. हे ऑथेंटिकेशन, ऑथोरायझेशन, लॉगिंग आणि इतर क्रॉस-कटिंग समस्यांसाठी उपयुक्त आहे.

मिडलवेअर तयार करण्यासाठी, app डिरेक्टरीमध्ये किंवा कोणत्याही सबडिरेक्टरीमध्ये middleware.ts (किंवा middleware.js) नावाची फाइल तयार करा. मिडलवेअर त्या डिरेक्टरी आणि तिच्या सबडिरेक्टरीमधील सर्व रूट्सवर लागू होईल.

            // app/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
 const token = request.cookies.get('auth-token');

 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url));
 }

 return NextResponse.next();
}

export const config = {
 matcher: ['/protected/:path*'], // Apply this middleware to paths starting with /protected/
};

            

              
                Copy
              
            
          

स्पष्टीकरण:

• middleware फंक्शन रिक्वेस्ट कुकीजमध्ये ऑथेंटिकेशन टोकन तपासते.
• टोकन नसल्यास, ते वापरकर्त्याला लॉगिन पेजवर रिडायरेक्ट करते.
• अन्यथा, ते विनंतीला रूट हँडलरकडे जाण्याची परवानगी देते.
• config ऑब्जेक्ट निर्दिष्ट करतो की हे मिडलवेअर केवळ /protected/ ने सुरू होणाऱ्या रूट्सवर लागू व्हावे.

एरर हँडलिंग (Error Handling)

मजबूत APIs तयार करण्यासाठी योग्य एरर हँडलिंग महत्त्वाचे आहे. तुम्ही अपवाद हाताळण्यासाठी आणि योग्य एरर प्रतिसाद परत करण्यासाठी try...catch ब्लॉक्स वापरू शकता.

            export async function GET(request: Request) {
 try {
 // Simulate an error
 throw new Error('Something went wrong!');
 } catch (error: any) {
 console.error('Error:', error);
 return NextResponse.json({ error: error.message }, { status: 500 });
 }
}

            

              
                Copy
              
            
          

स्पष्टीकरण:

• try...catch ब्लॉक रूट हँडलरमध्ये होणारे कोणतेही अपवाद पकडतो.
• catch ब्लॉकमध्ये, एरर लॉग केली जाते आणि 500 Internal Server Error स्टेटस कोडसह एरर प्रतिसाद परत केला जातो.

स्ट्रीमिंग प्रतिसाद

रूट हँडलर्स स्ट्रीमिंग प्रतिसादांना सपोर्ट करतात, ज्यामुळे तुम्हाला क्लायंटला डेटा टप्प्याटप्प्याने पाठवता येतो. हे विशेषतः मोठ्या डेटासेट किंवा दीर्घकाळ चालणाऱ्या प्रक्रियांसाठी उपयुक्त आहे.

            import { Readable } from 'stream';
import { NextResponse } from 'next/server';

async function* generateData() {
 for (let i = 0; i < 10; i++) {
 await new Promise(resolve => setTimeout(resolve, 500)); // Simulate delay
 yield `Data chunk ${i}\n`;
 }
}

export async function GET(request: Request) {
 const readableStream = Readable.from(generateData());

 return new Response(readableStream, {
 headers: { 'Content-Type': 'text/plain; charset=utf-8' },
 });
}

            

              
                Copy
              
            
          

स्पष्टीकरण:

• generateData फंक्शन एक असिंक्रोनस जनरेटर आहे जो विलंबानंतर डेटा चंक्स (chunks) तयार करतो.
• Readable.from() मेथड जनरेटरमधून एक रीडेबल स्ट्रीम तयार करते.
• Response ऑब्जेक्ट रीडेबल स्ट्रीमसह बॉडी म्हणून तयार केला जातो आणि Content-Type हेडर text/plain वर सेट केले जाते.

ऑथेंटिकेशन आणि ऑथोरायझेशन

तुमचे API एंडपॉइंट्स सुरक्षित करणे महत्त्वाचे आहे. तुम्ही मिडलवेअर वापरून किंवा थेट तुमच्या रूट हँडलर्समध्ये ऑथेंटिकेशन आणि ऑथोरायझेशन लागू करू शकता.

ऑथेंटिकेशन (Authentication)

ऑथेंटिकेशन विनंती करणाऱ्या वापरकर्त्याची ओळख सत्यापित करते. सामान्य ऑथेंटिकेशन पद्धतींमध्ये खालील गोष्टींचा समावेश आहे:

• JWT (JSON Web Tokens): यशस्वी लॉगिन झाल्यावर एक टोकन तयार करा आणि त्यानंतरच्या विनंत्यांवर ते सत्यापित करा.
• सेशन-आधारित ऑथेंटिकेशन: सेशन आयडेंटिफायर स्टोअर करण्यासाठी कुकीज वापरा आणि प्रत्येक विनंतीवर ते सत्यापित करा.
• OAuth: Google किंवा Facebook सारख्या तृतीय-पक्ष प्रदात्याकडे ऑथेंटिकेशन सोपवा.

मिडलवेअर वापरून JWT ऑथेंटिकेशनचे एक उदाहरण येथे आहे:

            // app/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import jwt from 'jsonwebtoken';

const secret = process.env.JWT_SECRET || 'your-secret-key'; // Replace with a strong, randomly generated secret

export function middleware(request: NextRequest) {
 const token = request.cookies.get('auth-token')?.value;

 if (!token) {
 return NextResponse.json({ message: 'Authentication required' }, { status: 401 });
 }

 try {
 jwt.verify(token, secret);
 return NextResponse.next();
 } catch (error) {
 return NextResponse.json({ message: 'Invalid token' }, { status: 401 });
 }
}

export const config = {
 matcher: ['/api/protected/:path*'],
};

            

              
                Copy
              
            
          

ऑथोरायझेशन (Authorization)

ऑथोरायझेशन हे ठरवते की वापरकर्त्याला कोणत्या संसाधनांमध्ये प्रवेश करण्याची परवानगी आहे. हे सामान्यतः भूमिका किंवा परवानग्यांवर आधारित असते.

तुम्ही तुमच्या रूट हँडलर्समध्ये वापरकर्त्याच्या भूमिका किंवा परवानग्या तपासून ऑथोरायझेशन लागू करू शकता आणि त्यांना प्रवेश नसल्यास एरर परत करू शकता.

            // app/api/admin/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 // Assume you have a function to get the user's role from the token or session
 const userRole = await getUserRole(request);

 if (userRole !== 'admin') {
 return NextResponse.json({ message: 'Unauthorized' }, { status: 403 });
 }

 // Logic to retrieve admin data
 const adminData = { message: 'Admin data' };
 return NextResponse.json(adminData);
}

async function getUserRole(request: Request): Promise {
 // Replace with your actual logic to extract the user's role from the request
 // This could involve verifying a JWT token or checking a session
 return 'admin'; // Example: hardcoded role for demonstration
}

            

              
                Copy
              
            
          

रूट हँडलर्स तैनात करणे

रूट हँडलर्स तुमच्या निवडलेल्या होस्टिंग प्रदात्यावर सर्व्हरलेस फंक्शन्स म्हणून तैनात केले जातात. Next.js Vercel, Netlify, AWS, आणि इतरांसह विविध डिप्लॉयमेंट प्लॅटफॉर्मला सपोर्ट करते.

Vercel साठी, डिप्लॉयमेंट तुमच्या Git रिपॉझिटरीला Vercel शी कनेक्ट करणे आणि तुमचा कोड पुश करण्याइतके सोपे आहे. Vercel आपोआप तुमचा Next.js प्रोजेक्ट ओळखतो आणि तुमचे रूट हँडलर्स सर्व्हरलेस फंक्शन्स म्हणून तैनात करतो.

प्रगत तंत्रे

एज फंक्शन्स (Edge Functions)

रूट हँडलर्सना एज फंक्शन्स म्हणून तैनात केले जाऊ शकते, जे तुमच्या वापरकर्त्यांच्या जवळ, CDN च्या काठावर (edge) कार्यान्वित केले जातात. यामुळे लेटेंसी लक्षणीयरीत्या कमी होऊ शकते आणि कार्यप्रदर्शन सुधारू शकते.

एखाद्या रूट हँडलरला एज फंक्शन म्हणून तैनात करण्यासाठी, तुमच्या route.ts फाइलमध्ये edge रनटाइम जोडा:

            export const runtime = 'edge';

import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.json({ message: 'Hello from the Edge!' });
}

            

              
                Copy
              
            
          

सर्व्हर ॲक्शन्स (Server Actions)

सर्व्हर ॲक्शन्स तुम्हाला तुमच्या React कंपोनंट्समधून थेट सर्व्हर-साइड कोड कार्यान्वित करण्याची परवानगी देतात. रूट हँडलर्स आणि सर्व्हर ॲक्शन्स एकत्र अखंडपणे काम करतात, ज्यामुळे तुम्ही सहजपणे गुंतागुंतीचे ॲप्लिकेशन्स तयार करू शकता.

सर्व्हर ॲक्शन वापरून रूट हँडलरला कॉल करण्याचे एक उदाहरण येथे आहे:

            // app/components/MyComponent.tsx
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';

async function handleSubmit(data: FormData) {
 'use server';

 const name = data.get('name');
 const email = data.get('email');

 const response = await fetch('/api/users', {
 method: 'POST',
 body: JSON.stringify({ name, email }),
 });

 if (response.ok) {
 router.refresh(); // Refresh the page to reflect the changes
 }
}

export default function MyComponent() {
 const router = useRouter();

 return (
 

 Name:
 


 Email:
 


 Create User
 
 );
}

            

              
                Copy
              
            
          

कॅशिंग (Caching)

कॅशिंग तुमच्या API एंडपॉइंट्सचे कार्यप्रदर्शन लक्षणीयरीत्या सुधारू शकते. ब्राउझर आणि CDN द्वारे तुमचे प्रतिसाद कसे कॅश केले जातात हे नियंत्रित करण्यासाठी तुम्ही Cache-Control हेडर वापरू शकता.

            return NextResponse.json({ message: 'Success!' }, { status: 200, headers: { 'Cache-Control': 'public, max-age=3600' } });

            

              
                Copy
              
            
          

हे उदाहरण Cache-Control हेडरला public, max-age=3600 वर सेट करते, जे ब्राउझर आणि CDN ला प्रतिसाद एक तासासाठी कॅश करण्यास सांगते.

सर्वोत्तम पद्धती (Best Practices)

• TypeScript वापरा: कोडची गुणवत्ता सुधारण्यासाठी आणि चुका टाळण्यासाठी TypeScript च्या टाइप सेफ्टीचा फायदा घ्या.
• रिक्वेस्ट व्हॅलिडेट करा: डेटाची अखंडता सुनिश्चित करण्यासाठी आणि दुर्भावनापूर्ण इनपुट टाळण्यासाठी येणाऱ्या विनंत्या प्रमाणित करा.
• एरर्स व्यवस्थित हाताळा: क्लायंटला माहितीपूर्ण एरर मेसेज देण्यासाठी योग्य एरर हँडलिंग लागू करा.
• तुमचे एंडपॉइंट्स सुरक्षित करा: तुमचे API एंडपॉइंट्स संरक्षित करण्यासाठी ऑथेंटिकेशन आणि ऑथोरायझेशन लागू करा.
• मिडलवेअर वापरा: ऑथेंटिकेशन, लॉगिंग आणि रिक्वेस्ट व्हॅलिडेशन यांसारख्या क्रॉस-कटिंग समस्यांसाठी मिडलवेअर वापरा.
• प्रतिसाद कॅश करा: तुमच्या API एंडपॉइंट्सचे कार्यप्रदर्शन सुधारण्यासाठी कॅशिंग वापरा.
• तुमच्या APIs चे निरीक्षण करा: समस्या लवकर ओळखण्यासाठी आणि निराकरण करण्यासाठी तुमच्या APIs चे निरीक्षण करा.
• तुमच्या APIs चे दस्तऐवजीकरण करा: इतर डेव्हलपर्ससाठी वापरण्यास सोपे करण्यासाठी तुमच्या APIs चे दस्तऐवजीकरण करा. API दस्तऐवजीकरणासाठी Swagger/OpenAPI सारख्या साधनांचा वापर करण्याचा विचार करा.

वास्तविक-जगातील उदाहरणे

रूट हँडलर्स कसे वापरले जाऊ शकतात याची काही वास्तविक-जगातील उदाहरणे येथे आहेत:

• ई-कॉमर्स API: उत्पादने, ऑर्डर आणि वापरकर्ते व्यवस्थापित करण्यासाठी API एंडपॉइंट्स तयार करणे.
• सोशल मीडिया API: ट्वीट्स पोस्ट करणे, वापरकर्त्यांना फॉलो करणे आणि टाइमलाइन मिळवण्यासाठी API एंडपॉइंट्स तयार करणे.
• कंटेंट मॅनेजमेंट सिस्टम (CMS) API: कंटेंट, वापरकर्ते आणि सेटिंग्ज व्यवस्थापित करण्यासाठी API एंडपॉइंट्स तयार करणे.
• डेटा ॲनालिटिक्स API: डेटा गोळा करण्यासाठी आणि त्याचे विश्लेषण करण्यासाठी API एंडपॉइंट्स तयार करणे. उदाहरणार्थ, एक रूट हँडलर वेगवेगळ्या वेबसाइट्सवरील ट्रॅकिंग पिक्सेलवरून डेटा प्राप्त करू शकतो आणि रिपोर्टिंगसाठी माहिती एकत्रित करू शकतो.

आंतरराष्ट्रीय ई-कॉमर्स उदाहरण: वापरकर्त्याच्या देशानुसार उत्पादनाची किंमत मिळवण्यासाठी वापरलेला रूट हँडलर. एंडपॉइंट वापरकर्त्याचे स्थान निश्चित करण्यासाठी रिक्वेस्टच्या भौगोलिक स्थानाचा (IP ॲड्रेसवरून घेतलेला) वापर करू शकतो आणि योग्य चलनामध्ये किंमती परत करू शकतो. हे स्थानिक खरेदी अनुभवात योगदान देते.

जागतिक ऑथेंटिकेशन उदाहरण: जगभरातील वापरकर्त्यांसाठी मल्टी-फॅक्टर ऑथेंटिकेशन (MFA) लागू करणारा रूट हँडलर. यामध्ये विविध प्रदेशांच्या गोपनीयता नियमांचे आणि दूरसंचार पायाभूत सुविधांचा आदर करत SMS कोड पाठवणे किंवा ऑथेंटिकेटर ॲप्स वापरणे समाविष्ट असू शकते.

बहुभाषिक कंटेंट वितरण: वापरकर्त्याच्या पसंतीच्या भाषेत कंटेंट वितरीत करणारा रूट हँडलर. हे रिक्वेस्टमधील `Accept-Language` हेडरवरून निश्चित केले जाऊ शकते. हे उदाहरण योग्य UTF-8 एन्कोडिंग आणि आवश्यकतेनुसार उजवीकडून-डावीकडे भाषा समर्थनाची गरज अधोरेखित करते.

निष्कर्ष

Next.js रूट हँडलर्स तुमच्या Next.js ॲप्लिकेशनमध्ये थेट API एंडपॉइंट्स तयार करण्याचा एक शक्तिशाली आणि लवचिक मार्ग प्रदान करतात. रूट हँडलर्सचा फायदा घेऊन, तुम्ही सहजपणे मजबूत APIs तयार करू शकता, तुमचे बॅकएंड लॉजिक तुमच्या React कंपोनंट्ससोबत ठेवू शकता आणि मिडलवेअर, स्ट्रीमिंग आणि एज फंक्शन्स यांसारख्या वैशिष्ट्यांचा लाभ घेऊ शकता.

या व्यापक मार्गदर्शकाने मूलभूत सेटअपपासून प्रगत तंत्रांपर्यंत सर्वकाही कव्हर केले आहे. या मार्गदर्शकात नमूद केलेल्या सर्वोत्तम पद्धतींचे पालन करून, तुम्ही उच्च-गुणवत्तेचे APIs तयार करू शकता जे सुरक्षित, कार्यक्षम आणि देखरेख करण्यायोग्य असतील.